<template>
  <div class="receive-share-coupon-wrap" style="min-height: 552px;">
    <div class="coupon-content">
      <div class="coupon-header">
        你的好友<span>{{ nick(coupon_info.nick) }}</span>送你张优惠券
      </div>
      <div class="coupon-list-item" @click="goDetails(goodsDetail)">
        <img class="goods-img" :src="goodsDetail.img || defaultImg"/>
        <div class="coupon-goods-info">
          <p class="goods-title">
            <span>{{ goodsDetail.title }}</span>
          </p>
          <div class="coupon-price-wrap">
            <p class="sale-price">劵后价：￥<span>{{ goodsDetail.after_price }}</span></p>
            <p class="sale-price active-price">原价：￥{{ goodsDetail.price }}</p>
          </div>
        </div>
      </div>
      <div class="coupon-box">
        <div v-if="coupon_info.promotion_type == 0" class="coupon-price">￥<span>{{ coupon_info.value }}</span></div>
        <div v-else class="coupon-price promotion_type"><span>{{ coupon_info.value }}</span>折</div>
        <div class="collection-box">
          <p class="collection-title">领取时间</p>
          <p class="collection-time">{{ coupon_info.start_time }}至{{ coupon_info.end_time }}</p>
        </div>
      </div>
      <div class="git-new" @click="GetClick">
        <img :src="getFlag? gitNew : couponEmpty" alt="">
      </div>
    </div>
    <wx-share
        ref="wxShares"
        :videoItem="shareInfo"
        shareType="zirongShare"
        @shareSuccess="shareSuccess"
        @openShareShade="openShareShade">
    </wx-share>
    <share-shade ref="shareShades"></share-shade>
  </div>
</template>

<script>
const defaultImg = 'https://img.wifenxiao.com/h5-wfx/images/default_goods_img.jpg'
const gitNew = 'https://img.wifenxiao.com/h5-wfx/images/DZ/coupon/git-new.png'
const couponEmpty = 'https://img.wifenxiao.com/h5-wfx/images/DZ/coupon/coupon-empty.png'
import {getShareCouponDetail, GetCoupons, GetOwnCoupon} from '@/api/dz/dzApi.js'
import wxShare from '@/components/wxShare'
import shareShade from '@/components/wxShare/shareShade'
import {mpShare} from '@/utils/utils'
import Vue from "vue";

export default Vue.extend({

  data() {
    return {
      defaultImg: defaultImg,
      gitNew: gitNew,
      couponEmpty: couponEmpty,
      getFlag: 1,
      share_id: '',
      goodsDetail: {},
      coupon_info: {},
      shareInfo: {
        img: '',
        title: '',
        detailId: ''
      }
    }
  },
  components: {
    wxShare,
    shareShade
  },
  methods: {
    init() {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 50000)
      const share_id = this.share_id
      getShareCouponDetail({share_id}).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.goodsDetail = res.data.item
          this.coupon_info = res.data.coupon_info

          // 小程序分享
            let shareOpt = {
              title: res.data.item.title,
              imgUrl: res.data.item.img || defaultImg,
              shareParam: 'detailId=' + this.share_id
            }
            mpShare(true, false, '/dz/pages/receiveShareCoupon/index', shareOpt)
          // 分享
          this.getFlag = res.data.can_receive
          this.shareInfo.detailId = this.share_id
          this.shareInfo.img = this.goodsDetail.img || defaultImg
          this.shareInfo.title = this.goodsDetail.title
          GetOwnCoupon({share_id}).then(res => {
            if (res.status == 1) {
              this.$refs.wxShares.handleClickShare()
            }
          })
        } else {
          this.$Error(res.msg)
        }
      })
    },
    nick(nick) {
      if (nick) {
        const sLength = nick.length
        nick = nick.replace(nick.substring(1, sLength - 1), '*')
      }
      return nick
    },
    GetClick() {
      const data = {
        share_id: this.share_id
      }
      GetCoupons(data).then(res => {
        if (res.status == 1) {
          this.$Error('领取成功')
          const query = this.$route.query
          this.Jump('item-detail',{
            sid:query.sid,
            pid:query.pid,
            detailId:this.goodsDetail.item_id
          })
        } else {
          this.$Error(res.msg)
        }
      })
    },
    goDetails(item) {
      const query = this.$route.query
      this.Jump('item-detail',{
        sid:query.sid,
        pid:query.pid,
        detailId:item.item_id
      })
    },
    openShareShade(e) {
      this.$refs.shareShades.showShade = true
      setTimeout(() => {
        this.$refs.shareShades.showShade = false
      }, 10000)
    },
    shareSuccess() {
      this.$refs.shareShades.showShade = false
      this.isShowdeposit = false
      this.init()
      // 刷新页面
      this.$router.go(0)
    },
    Jump(url, data) {
      this.$JumpPath(this, url, data)
    },
  },

  created() {
    this.share_id = this.$route.query.detailId
    this.init()
  }
})
</script>

<style lang='scss'>
@import "../../../../styles/mixin";

.receive-share-coupon-wrap {
  width: 100%;
  height: 100%;
  background-image: url("https://img.wifenxiao.com/h5-wfx/images/DZ/coupon/receive-share-coupon.png");
  background-size: 100% 100%;

  .coupon-content {
    width: 100%;
    padding: 30px 25px 0 25px;

    .coupon-header {
      width: 508px;
      height: 62px;
      background: rgba(228, 19, 20, 1);
      opacity: 0.5;
      border-radius: 31px;
      margin: 0 auto;
      font-size: 28px;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      line-height: 62px;
      text-align: center;
      margin-bottom: 30px;
      padding: 0 20px;

      span {
        color: rgba(255, 216, 97, 1);
        font-weight: bold;
      }
    }

    .coupon-list-item {
      width: 700px;
      height: 260px;
      display: flex;
      align-items: center;
      padding: 30px;
      margin-bottom: 29px;
      background: #fff;
      border-radius: 20px;

      .goods-img {
        width: 200px;
        height: 200px;
        border-radius: 10px;
        margin-right: 20px;
      }

      .coupon-goods-info {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .goods-title {
          color: #333333;
          font-size: 24px !important;
          @include lineClamp(28px, 40px, 2);
          font-weight: bold;
        }

        .coupon-price-wrap {
          .sale-price {
            font-weight: 500;
            color: rgba(242, 12, 35, 1);
            font-size: 24px;
            line-height: 35px;

            span {
              font-size: 40px;
            }
          }

          .active-price {
            color: rgba(153, 153, 153, 1);
            text-decoration: line-through;
            margin-top: 10px;
          }
        }
      }
    }

    .coupon-box {
      width: 700px;
      height: 180px;
      background-image: url("https://img.wifenxiao.com/h5-wfx/images/DZ/coupon/coupons.png");
      background-size: 100% 100%;
      display: flex;
      margin-bottom: 111px;

      .coupon-price {
        flex: 1;
        line-height: 180px;
        color: rgba(243, 12, 35, 1);
        font-size: 26px;
        font-weight: 500;
        text-align: center;

        span {
          font-size: 50px;
          font-weight: bold;
        }
      }

      .promotion_type {
        font-size: 30px;
        font-weight: bold;

        span {
          font-size: 50px;
        }
      }

      .collection-box {
        flex: 2.6;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 40px;

        .collection-title {
          font-size: 28px;
          font-weight: 500;
          color: rgba(51, 51, 51, 1);
          line-height: 50px;
        }

        .collection-time {
          font-size: 26px;
          font-weight: 500;
          color: rgba(255, 140, 1, 1);
          line-height: 50px;
        }
      }
    }

    .git-new {
      width: 560px;
      height: 100px;
      margin: 0 auto;

      img {
        width: 100%;
      }
    }
  }
}
</style>
